<!DOCTYPE html>
<html lang="en">
    <head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
		<title>Example work with content controls</title>
        
		<style type="text/css">
			html, body {
				margin   : 0px;
				padding  : 0px;
				overflow : hidden;
				width    : 100%;
				height   : 100%;
				font-family : "Helvetica Neue", Helvetica, Arial, sans-serif;
			}

			body {
				overflow-y: inherit;
			}
			
			.buttonDefault {
				font-family : "Helvetica Neue", Helvetica, Arial, sans-serif;
				height      : 22px;
				cursor      : pointer;
				border      : 1px solid silver;
				shadow      : 0 0;
				font-size   : 14px;				
				margin-left : calc(50% - 100px); 
				width       : 200px;	
				outline     : none;
			}
			
			.buttonDefault:hover{		
				border : 1px solid silver;
			}
			
			.buttonDefault:active{		
				border : 1px solid black;
			}

			.buttonSave {
				color         : black;
				background    : rgb(115, 177, 57);
				margin-bottom : 5px;
				margin-left   : calc(50% - 100px);
			}
		
			
			.buttonAddTextQ {
				margin-top  : 5px;
				color       : black;
				background  : rgb(190, 255, 255);
			}
				
			.buttonAddListQ {
				margin-top  : 5px;
				color       : black;
				background  : rgb(164, 171, 207);
			}
			
			.buttonInsertOption {
				margin-top  : 5px;
				color       : black;
				background  : rgb(255, 195, 128);
			}
			
			.buttonCopyField {
				margin-top  : 5px;
				color       : black;
				background  : rgb(218, 144, 234);
			}

			
			.propertiesContainer {
				margin-top    : 10px;
				width         : calc(100% - 20px);
				padding-left  : 10px;
				padding-right : 10px;
				border-top    : 1px solid silver;
			}
			
			.propertyTitle {
				padding-top    : 3px;
				padding-bottom : 3px;
				color          : black;
			}
			
			textarea.textAreaDefault {			
				resize     : none;				
				width      : calc(100% - 5px);
				background : rgb(211, 210, 211);
				border     : 1px solid rgb(143, 143, 143);
				outline    : none;
			}
			
			.inputDefault {
				border     : 1px solid rgb(143, 143, 143);
				background : rgb(211, 210, 211);
				outline    : none;
			}
		
			.roundButton {
			
				background-color : rgb(211, 210, 211);
				border           : 1px solid rgb(143, 143, 143);
				color            : black;
				text-align       : center;
				text-decoration  : none;
				display          : inline-block;
				font-size        : 20px;
				border-radius    : 50%;
				width            : 20px;
				height           : 20px;
				position         : relative;
				outline          : none;
				margin-left      : 5px;
				cursor           : pointer;
			}
			
			.roundButton:active {
				border-color : black;
			}
			
			.roundButton span {
				position  : absolute;
				top       : 50%;
				left      : 50%;
				transform : translate(-50%, -50%);
			}
			
		
			.inputTextQSubfields {
				width       : 150px;
				margin-left : 20px;
			}
			
			.divAddTextQContainerSubElement {
				margin-top : 3px;
				width      : 250px;			
				height     : 20px;
			}

			input[type="checkbox"].checkboxXMark {
				-webkit-appearance : initial;
				appearance         : initial;
				background         : rgb(211, 210, 211);
				width              : 20px;
				height             : 20px;
				border             : 1px solid rgb(143, 143, 143);
				position           : relative;
				outline            : none;
				margin             : 0px;
			}

			input[type="checkbox"].checkboxXMark:checked:after {
				content           : "X";
				position          : absolute;
				left              : 50%;
				top               : 50%;
				-webkit-transform : translate(-50%, -50%);
				-moz-transform    : translate(-50%, -50%);
				-ms-transform     : translate(-50%, -50%);
				transform         : translate(-50%, -50%);
			}

			label.checkboxXMarkLabel {
				position  : relative;
				top       : -4px;
				font-size : 14px;
			}

			label.checkboxXMarkLabel span {
				font-size : 10px;
				color     : rgb(110, 110, 110);
			}
			
			.inputAddTextQAnotherDescription {
				height : 18px;
				width  : 120px;
			}

			.inputAddTextQAnotherMaximum {
				height : 18px;
				width  : 30px;
			}

			input::-webkit-outer-spin-button,
			input::-webkit-inner-spin-button {
				-webkit-appearance : none;
				margin             : 0px;
			}

			div.paneElement {
				margin-top    : 10px;
				padding-left  : 10px;
				padding-right : 10px;
				width         : calc(100% - 40px);
			}

			div.paneElementInfo {
				margin-left : 30px;
				border      : 1px solid rgb(143, 143, 143);
			}

			div.paneElementInfoTitle {
				background : rgb(211, 210, 211);
			}

			div.paneElementInfoText {
				background : rgb(255, 255, 255);
				border-top : 1px solid rgb(143, 143, 143);
			}

			div.copyFieldElement {
				margin-left : 10px;
			}

			div.copyFieldSubElement {
				margin-left : 30px;
			}

			div.copyFieldAnotherLabel {
				margin-left : 30px;
				font-size   : 12px;
			}

			select.selectInsertOption {
				width            : calc(100% - 20px);
				outline          : none;
				background-color : rgb(211, 210, 211);
				border           : 1px solid rgb(143, 143, 143);
			}

			.selectInsertOptionCondition {
				width            : calc(50% - 20px);
				outline          : none;
				background-color : rgb(211, 210, 211);
				border           : 1px solid rgb(143, 143, 143);
			}

			div.selectInsertOptionConditionTitle {
				width            : calc(50% - 20px);
				outline          : none;
			}


		</style>

		<link rel="stylesheet" href="../plugins.css">
		 
		<script type="text/javascript" src="../pluginBase.js"></script>
    	<script type="text/javascript" src="code.js"></script>
    </head>
	<body>

	<div>
		<button id="buttonAddTextQ" class="buttonDefault buttonAddTextQ">Add Text Q.</button>
		<div id="divAddTextQ" style="display:none;" class="propertiesContainer">

			<div class="propertyTitle" style="width:100%;float:left;">
				[Question Header]
			</div>
			<input id="inputAddTextQHeader" type="text" class="inputDefault" style="width:100%;float:left;"/>
			<div class="propertyTitle">
				[Question Text]
			</div>
			<textarea id="textareaAddTextQText" class="textAreaDefault" style="width:calc(100% - 4px);float:left;"></textarea>

			<div id="divAddTextQContainerSub" style="width:100%;float:left;">

				<div class="divAddTextQContainerSubElement">
					<input id="inputAddTextQSub0" type="text" class="inputDefault inputTextQSubfields"
						   style="float:left;"/>
					<button id="buttonAddTextQRemoveSub" class="roundButton" style="float:left;"><span>-</span>
					</button>
					<button id="buttonAddTextQAddSub" class="roundButton" style="float:left;"><span>+</span>
					</button>
				</div>

			</div>

			<div style="margin-top: 5px;width:100%;float:left;">

				<div style="float:left; padding-right: 5px;height:25px;">
					<form>
						<input id="checkboxAddTextQAnother" class="checkboxXMark" type="checkbox"/>
						<label for="checkboxAddTextQAnother" class="checkboxXMarkLabel">Add another</label>
					</form>
				</div>

				<div style="float:left; padding-right: 15px;height:25px;">
					<input id="checkboxAddTextQAnotherDescription" placeholder="[describe]"
						   class="inputDefault inputAddTextQAnotherDescription" type="text"/>
				</div>

				<div style="float:left; height:25px;">
					<form>
						<label for="inputAddTextQAnotherMaximum" style="font-size:14px;">Maximum</label>
						<input id="inputAddTextQAnotherMaximum" class="inputDefault inputAddTextQAnotherMaximum"
							   type="number" min=0 max=999/>
					</form>
				</div>

			</div>

			<div style="margin-top: 5px;width:100%;float:left;">
				<div style="float:left; padding-right: 5px;">
					<form>
						<input id="checkboxAddTextQNotEditable" class="checkboxXMark" type="checkbox"/>
						<label for="checkboxAddTextQNotEditable" class="checkboxXMarkLabel">Not Editable</label>
					</form>
				</div>
			</div>

			<div style="margin-top: 5px;width:100%;float:left;">
				<div style="float:left; padding-right: 5px;">
					<form>
						<input id="checkboxAddTextQLogic" class="checkboxXMark" type="checkbox"/>
						<label for="checkboxAddTextQLogic" class="checkboxXMarkLabel">Use with Logic <span>(if checked this field shows in the "Insert option" tool)</span></label>
					</form>
				</div>
			</div>

			<div style="width:100%;float:left; border-bottom : 1px solid silver;">
				<button id="buttonAddTextQSave" class="buttonDefault buttonSave">Save</button>
			</div>

		</div>

		<button id="buttonAddListQ" class="buttonDefault buttonAddListQ">Add List Q.</button>
		<div id="divAddListQ" style="display:none;" class="propertiesContainer">

			<div class="propertyTitle" style="width:100%;float:left;">
				[Question Header]
			</div>
			<input id="inputAddListQHeader" style="width:100%;float:left;" type="text" class="inputDefault" style="width : 100%;"/>
			<div class="propertyTitle" style="width:100%;float:left;">
				[Question Text]
			</div>
			<textarea id="textareaAddListQText" class="textAreaDefault" style="width:calc(100% - 4px);float:left;"></textarea>

			<div id="divAddListQContainerElements" style="margin-top:5px; width:100%;float:left;">

				<div class="divAddTextQContainerSubElement">
					<input id="inputAddListQElements0" type="text" class="inputDefault inputTextQSubfields"
						   style="float:left;"/>
					<button id="buttonAddListQRemoveElement" class="roundButton" style="float:left;"><span>-</span>
					</button>
					<button id="buttonAddListQAddElement" class="roundButton" style="float:left;"><span>+</span>
					</button>
				</div>

			</div>

			<div style="margin-top: 5px;width:100%;float:left;">
				<div style="float:left; padding-right: 5px;">
					<form>
						<input id="checkboxAddListQAllowMultiple" class="checkboxXMark" type="checkbox"/>
						<label for="checkboxAddListQAllowMultiple" class="checkboxXMarkLabel">Allow Multiple
							Selections <span>(if not checked, only one selection allowed; if checked, more than one selection is allowed)</span></label>
					</form>
				</div>
			</div>

			<div style="margin-top: 5px;width:100%;float:left;">
				<div style="float:left; padding-right: 5px;">
					<form>
						<input id="checkboxAddListQLogic" class="checkboxXMark" type="checkbox"/>
						<label for="checkboxAddListQLogic" class="checkboxXMarkLabel">Use with Logic <span>(if checked this field shows in the "Insert option" tool)</span></label>
					</form>
				</div>
			</div>

			<div style="width:100%;float:left; border-bottom : 1px solid silver;">
				<button id="buttonAddListQSave" class="buttonDefault buttonSave">Save</button>
			</div>
		</div>

		<button id="buttonInsertOption" class="buttonDefault buttonInsertOption">Insert Option</button>
		<div id="divInsertOption" style="display:none;" class="propertiesContainer">
			<div class="propertyTitle" style="width:100%;float:left;">
				This option shows if:
			</div>
			<select id="selectInsertOptionField" class="selectInsertOption" style="float:left;">
			</select>

			<div style="width:100%;float:left;margin-top:5px;">
				<div class="selectInsertOptionConditionTitle" style="float:left;">
					Choose Condition
				</div>

				<div class="selectInsertOptionConditionTitle" style="margin-left:20px;float:left;">
					Choose option
				</div>
			</div>

			<div style="width:100%;float:left;margin-top:5px;">
				<select id="selectInsertOptionCondition" class="selectInsertOptionCondition" style="float:left;">
					<option>equals</option>
					<option>does not equal</option>
					<option>contains</option>
					<option>does not contain</option>
					<option>is more than</option>
					<option>is less than</option>
				</select>

				<select id="selectInsertOptionValue" class="selectInsertOptionCondition" style="margin-left:20px; float:left;display: none;">
				</select>

				<input id="inputInsertOptionValue" class="selectInsertOptionCondition" style="margin-left:20px; float:left;display: none;"/>
			</div>

			<div style="margin-top: 5px;width:100%;float:left;">
				<div style="float:left; padding-right: 5px;">
					<form>
						<input id="checkboxInsertOptionAdditional" class="checkboxXMark" type="checkbox"/>
						<label for="checkboxInsertOptionAdditional" class="checkboxXMarkLabel">Add an additional requirement to make the condition true.</label>
					</form>
				</div>
			</div>

			<div style="width:100%;float:left; border-bottom : 1px solid silver;">
				<button id="buttonInsertOptionInsert" class="buttonDefault buttonSave">Insert</button>
			</div>
		</div>

		<button id="buttonCopyField" class="buttonDefault buttonCopyField">Copy Field</button>
		<div id="divCopyField" style="display:none;padding-top: 5px;" class="propertiesContainer">

			<div style="width:100%; border-bottom : 1px solid silver;">
				<button id="buttonCopyFieldInsert" class="buttonDefault buttonSave">Insert Field</button>
			</div>
		</div>

		<div id="divQuestionPane" style="width:100%;">
		</div>

	</div>


	</body>
</html>